page {
  background: #F4F4F4 url("https://pic.hongsizg.com/minipro/mall/page-bg.png") no-repeat;
  background-size: 100% auto;
  padding: 0 22rpx;
  box-sizing: border-box;

  .t-navbar-content {
    background: transparent;
  }

  .goods {
    background: #FFFFFF;
    border-radius: 30rpx 30rpx 30rpx 30rpx;

    .goods-pic {
      width: 100%;
    }

    .info {
      padding: 30rpx;

      .name {
        font-family: PingFang SC, PingFang SC;
        font-weight: 800;
        font-size: 36rpx;
        color: #030303;
        line-height: 42rpx;
        text-align: left;
        font-style: normal;
        text-transform: none;
      }

      .flex {
        display: flex;
        align-items: center;
        justify-content: center;
        margin-top: 12rpx;

        .left {
          flex: 1;
          font-family: PingFang SC, PingFang SC;
          font-weight: 800;
          font-size: 24rpx;
          color: #DAA652;
          line-height: 28rpx;
          text-align: left;
          font-style: normal;
          text-transform: none;

          .title {
            font-size: 24rpx;
          }

          .price {
            font-family: PingFang SC-Heavy;
            font-size: 32rpx;
          }

          .origin {
            font-family: PingFang SC-Regular;
            font-size: 24rpx;
            color: #989898;
            // 中划线
            text-decoration: line-through;
          }
        }

        .right {
          font-family: PingFang SC, PingFang SC;
          font-weight: 400;
          font-size: 24rpx;
          color: #989898;
          line-height: 28rpx;
          text-align: center;
          font-style: normal;
          text-transform: none;
        }
      }
    }
  }

  .package {
    margin-top: 42rpx;
    margin-bottom: 12rpx;

    .title {
      padding: 0 30rpx;
      font-family: PingFang SC, PingFang SC;
      font-weight: 800;
      font-size: 32rpx;
      color: #030303;
      line-height: 38rpx;
      text-align: left;
      font-style: normal;
      text-transform: none;
      margin-bottom: 12rpx;
    }

    .list {
      padding: 30rpx 32rpx;
      background: #FFFFFF;
      border-radius: 30rpx 30rpx 30rpx 30rpx;

      .list-item {
        padding: 18rpx 0 18rpx 10rpx;
        //border-bottom: 2rpx solid #979797;

        .category {
          position: relative;
          font-family: PingFang SC, PingFang SC;
          font-weight: 800;
          font-size: 24rpx;
          color: #000000;
          line-height: 28rpx;
          text-align: left;
          font-style: normal;
          text-transform: none;
        }

        .category::before {
          position: absolute;
          left: -10px;
          top: 50%;
          transform: translateY(-50%);
          content: "";
          width: 8rpx;
          height: 8rpx;
          background: #D9D9D9;
          border-radius: 50%;
        }

        .items {
          .item {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 20rpx 0;
            border-bottom: 1rpx solid #F4F4F4;

            .name {
              font-family: PingFang SC, PingFang SC;
              font-weight: 500;
              font-size: 24rpx;
              color: #000000;
              line-height: 28rpx;
              text-align: center;
              font-style: normal;
              text-transform: none;
            }

            .more {
              .count {
                font-family: PingFang SC, PingFang SC;
                font-weight: 500;
                font-size: 20rpx;
                color: #989898;
                line-height: 23rpx;
                text-align: center;
                font-style: normal;
                text-transform: none;
              }

              .price {
                font-family: PingFang SC, PingFang SC;
                font-weight: 500;
                font-size: 20rpx;
                color: #000000;
                line-height: 23rpx;
                text-align: center;
                font-style: normal;
                text-transform: none;
              }
            }
          }
        }
      }

      .list-item:first-child {
        padding-top: 0;
      }

      .list-item:last-child {
        border-bottom: none;

        .items {
          .item:last-child {
            border-bottom: none;
            padding-bottom: 0;
          }
        }
      }
    }
  }

  .tab {
    margin-top: 42rpx;

    .tab-nav {
      display: flex;
      padding: 0 30rpx;

      .tab-nav-item {
        position: relative;
        font-family: PingFang SC, PingFang SC;
        font-weight: 800;
        font-size: 32rpx;
        color: #5B5B5B;
        line-height: 38rpx;
        text-align: center;
        font-style: normal;
        text-transform: none;
        margin-right: 44rpx;
      }

      .tab-nav-item.active {
        color: #68411E;
      }

      .tab-nav-item.active::after {
        position: absolute;
        left: 50%;
        bottom: -10rpx;
        transform: translateX(-50%);
        content: "";
        width: 2rem;
        height: 6rpx;
        background: #68411E;
        border-radius: 36rpx 36rpx 36rpx 36rpx;
      }
    }

    .tab-content {
      margin-top: 24rpx;

      .tab-content-item {
        display: none;
        padding: 30rpx 32rpx;
        background: #FFFFFF;
        border-radius: 30rpx 30rpx 30rpx 30rpx;
      }

      .tab-content-item.active {
        display: block;

        .address-item {
          position: relative;

          .title {
            display: flex;
            align-items: center;
            font-family: PingFang SC, PingFang SC;
            font-weight: 500;
            font-size: 32rpx;
            color: #000000;
            line-height: 38rpx;
            font-style: normal;
            text-transform: none;
            margin-bottom: 8rpx;
            .icon {
              width: 32rpx;
              height: 32rpx;
            }
            .text {
              padding-left: 6rpx;
            }
          }

          .content {
            font-family: PingFang SC, PingFang SC;
            font-weight: 400;
            font-size: 24rpx;
            color: #9E9E9E;
            line-height: 28rpx;
            font-style: normal;
            text-transform: none;
          }
        }

        .address-item::after {
          content: "";
          position: absolute;
          right: 0;
          top: 50%;
          width: 8rpx;
          height: 8rpx;
          border-top: 2rpx solid #9E9E9E;
          border-right: 2rpx solid #9E9E9E;
          transform: translateY(-50%) rotate(45deg);
        }
      }
    }
  }

  .fixed-bottom {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    justify-content: space-between;
    width: 100%;
    box-sizing: border-box;
    align-items: center;
    padding: 32rpx 54rpx 44rpx;
    background: #FFFFFF;
    box-shadow: 0rpx -6rpx 11rpx 0rpx rgba(0, 0, 0, 0.08);

    .left {
      display: flex;
      flex-direction: column;
      justify-content: space-between;

      .money {
        font-family: PingFang SC, PingFang SC;
        font-weight: 500;
        font-size: 24rpx;
        color: #000000;
        line-height: 28rpx;
        text-align: left;
        font-style: normal;
        text-transform: none;

        .total {
          font-size: 40rpx;
          color: #DAA652;
          padding-left: 6rpx;
        }
      }

      .info {
        font-family: PingFang SC, PingFang SC;
        font-weight: 500;
        font-size: 20rpx;
        color: #5B5B5B;
        line-height: 23rpx;
        text-align: left;
        font-style: normal;
        text-transform: none;
        margin-top: 10rpx;

        .count {
          padding-right: 6rpx;
        }
      }
    }

    .btn {
      width: 272rpx;
      height: 80rpx;
    }
  }
}
